<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="TourClose"></div>
      <div class="tour">
        <div class="rele-titles"><img @click="TourClose" src="../assets/img/tub.png" alt="">客源录入</div>
        <div class="tour-info">
          <!-- 客户资料 -->
          <div class="custo">
            <div class="custo-title">客户资料</div>
            <ul class="custo-list">
              <li>
                <div class="custo-name">姓名</div>
                <div class="custo-input">
                  <input type="" v-model="formData.name" name="" placeholder="请输入姓名"
                            onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')" style="border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="custo-name">手机</div>
                <div class="custo-input">
                  <input type="" name="" v-model="formData.phone"placeholder="请输入手机号码"
                            onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" style="border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="custo-name">省份</div>
                <div id="custo-input" class="custo-input">
                  <select v-model="formData.province" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;" @change="provchange" >
                    <option
                      v-for="item in prov"
                      :key="item.CODE"
                      :label="item.region_name_c"
                      :value="item.CODE">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">城市</div>
                <div class="custo-input">
                  <select v-model="formData.city" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in city"
                      :key="item.CODE"
                      :label="item.region_name_c"
                      :value="item.CODE">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">邮箱</div>
                <div class="custo-input">
                  <input type="" name="" v-model="formData.email" placeholder="请输入邮箱" style="border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="custo-name">微信</div>
                <div class="custo-input">
                  <input type="" name="" v-model="formData.wechat" placeholder="请输入微信号" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" style="border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="custo-name">性别</div>
                <div class="custo-input">
                  <select v-model="formData.sex" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in Tourlist.TouristsSex"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">住址</div>
                <div class="custo-input">
                  <input type="" name="" v-model="formData.address"  placeholder="请输入住址" style="border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="custo-name">编客源号</div>
                <div class="custo-input">
                  <input type="text"  v-model="formData.state" placeholder="请输入编号" readonly style="border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="custo-name">职业</div>
                <div class="custo-input">
                  <select v-model="formData.occupation" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;" >
                    <option
                      v-for="item in Tourlist.TouristsOccupation"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">交易</div>
                <div class="custo-input">
                  <select v-model="formData.transaction" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;" >
                    <option
                      v-for="item in Tourlist.TouristsTransaction"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">公私客</div>
                <div class="custo-input">
                  <select v-model="formData.publicandprivate" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in Tourlist.TouristsPublicandprivate"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">等级</div>
                <div class="custo-input">
                  <select v-model="formData.grade" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in Tourlist.TouristsGrade"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">经纪人</div>
                <div class="custo-input">
                  <input type="" v-model="myuserinfo.name" placeholder="请输入经纪人" name="" readonly style="border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="custo-name">组别</div>
                <div class="custo-input">
                  <input type="text" v-model="myuserinfo.department_group.title" placeholder="请输入组别" readonly style="border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="custo-name">门店</div>
                <div class="custo-input">
                  <input type="" v-model="myuserinfo.department_store.title" placeholder="请输入门店" name="" style="border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="custo-name">区域</div>
                <div class="custo-input">
                  <input type="" v-model="myuserinfo.department.title" placeholder="请输入区域" name="" style="border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="custo-name">委托日期</div>
                <div class="custo-input">
                  <el-date-picker
                    v-model="formData.entrustment_time"
                    type="date"
                    placeholder="选择日期" style="width: 100%;border: 1px solid #a0a0a0;">
                  </el-date-picker>
                </div>
              </li>
            </ul>
          </div>
          <!-- 客户资料 end-->
          <!-- 客户需求 -->
          <div class="demand">
            <div class="custo-title">客户需求</div>
            <ul class="custo-list custo-list1">
              <!-- 价格 -->
              <div class="pub-label">价格</div>
              <li>
                <div class="custo-name">售总价</div>
                <div class="custo-input ">
                  <input type="" v-model="formData.totalsales_price" name="" style="width: 70%;border: 1px solid #a0a0a0;" placeholder="请输入总价"
                         onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)">
                  <span>万元</span></div>
              </li>
              <li>
                <div class="custo-name">售单价</div>
                <div class="custo-input">
                  <input type="" v-model="formData.saleunit_price" name="" style="width: 60%;border: 1px solid #a0a0a0;" placeholder="请输入单价"
                         onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)">
                  <span>万元/㎡</span></div>
              </li>
              <li>
                <div class="custo-name">租金</div>
                <div class="custo-input">
                  <input type="" name="" v-model="formData.rent_price_month" style="width: 70%;border: 1px solid #a0a0a0;" placeholder="请输入租金"
                         onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)">
                  <span>元/月</span></div>
              </li>
              <li>
                <div class="custo-name">租金</div>
                <div class="custo-input">
                  <input type="" v-model="formData.rent_price_year" name="" style="width: 60%;border: 1px solid #a0a0a0;" placeholder="请输入租金"
                         onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)">
                  <span>元/年</span></div>
              </li>
            </ul>
            <!-- 价格 end-->
            <!--房屋  -->
            <div class="Houses">
              <div class="pub-label">房屋</div>
              <ul class="Houses-list">
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">房</div>
                    <div class="custo-input">
                      <select v-model="formData.room" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 28px;">
                        <option
                          v-for="item in Tourlist.TouristsrRoom "
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">厅</div>
                    <div class="custo-input">
                      <select v-model="formData.office" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 28px;">
                        <option
                          v-for="item in Tourlist.TouristsOffice"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">卫</div>
                    <div class="custo-input">
                      <select v-model="formData.wei" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 28px;">
                        <option
                          v-for="item in Tourlist.TouristsWei"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">朝向</div>
                    <div class="custo-input">
                      <select v-model="formData.orientation" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 28px;">
                        <option
                          v-for="item in Tourlist.TouristsOrientation"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">用途</div>
                    <div class="custo-input">
                      <select v-model="formData.purpose" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 28px;">
                        <option
                          v-for="item in Tourlist.TouristsPurpose"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">装修</div>
                    <div class="custo-input">
                      <select v-model="formData.renovation" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 28px;">
                        <option
                          v-for="item in Tourlist.TouristsRenovation"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <!--房屋  end-->
            <!--地段  -->
            <div class="Houses">
              <div class="pub-label">地段</div>
              <ul class="Houses-list">
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">城市</div>
                    <div class="custo-input">
                      <select v-model="formData.section_city" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;"
                                 @change="citychange">
                        <option
                          v-for="item in city"
                          :key="item.CODE"
                          :label="item.region_name_c"
                          :value="item.CODE">
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">县/区</div>
                    <div class="custo-input">
                      <select v-model="formData.section_xian"  placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;"
                                 @change="properchange">
                        <option
                          v-for="item in proper"
                          :key="item.CODE"
                          :label="item.region_name_c"
                          :value="item.CODE">
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
                <li>
                  <!--<div class="Houses-li">-->
                    <!--<div class="custo-name">街道</div>-->
                    <!--<div class="custo-input">-->
                      <!--<select v-model="formData.section_street" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;"-->
                                 <!--@change="areaschange">-->
                        <!--<option-->
                          <!--v-for="item in areas"-->
                          <!--:key="item.id"-->
                          <!--:label="item.title"-->
                          <!--:value="item.id">-->
                        <!--</option>-->
                      <!--</select>-->
                    <!--</div>-->
                  <!--</div>-->
                  <div class="Houses-li">
                    <div class="custo-name">小区</div>
                    <div class="custo-input">
                      <el-select v-model="formData.section_residential" @change="broadcast" filterable placeholder="请选择" style="width:100%;">
                        <el-option
                          v-for="item in Resi"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <!--地段  end-->
          </div>
          <!-- 客户需求 end-->
        </div>
        <!-- 备注 -->
        <div class="rema">
          <textarea placeholder="请输入备注..." v-model="formData.desc" style="border: 1px solid #a0a0a0;"></textarea>
        </div>
        <!-- 按钮 -->
        <div class="tour-btn">
          <el-button  type="primary" style="margin-top: 6px;">发短息给他</el-button>
          <el-button @click="editSubmi"  type="primary">提交该客源</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import  {recoverBodyScroll} from '@/comm/js/dom.js'
  export default {
    props: {
      SetHourList:{
        type:Function
      },
      LDmodal: {
        type:Function
      },
      TourClose: {
        type: Function
      }
    },
    data() {
      return {
        myuserinfo:{
          department:'',
          department_store:'',
          department_group:''

        },//个人信息
        citys: [],
        Resi: [],
        // areas: [],
        proper: [],
        //交易
        Tourlist: {},
        formData: {
          country: "CN",
          section_country: "CN",
        },
        provs: '',
        TouristsFloor: {},
        res: {},
        // 省份
        prov: [],
        // 城市
        city: [],
        isFing:true  //判读是否发起请求
      }
    },
    methods: {
      // 提交客源
      editSubmi() {
        this.formData.agent_id = this.myuserinfo.id;
        this.formData.group_id = this.myuserinfo.department_group.id;
        this.formData.store_id = this.myuserinfo.department_store.id;
        this.formData.region_id = this.myuserinfo.department.id;
        this.formData.section_province = this.formData.province;
        console.log(this.formData.transaction);
        console.log(this.formData);
        let that = this;
        that.$http.post('/newapi/Tourists/add', this.formData)
          .then(function (res) {
            if (res.data.status === 200) {
              recoverBodyScroll();//恢复滚动条
              that.TourClose();
              that.formData = '';
              that.SetHourList();
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            } else {
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            }
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      // 获取楼盘下拉
      // areaschange() {
      //   let that = this;
      //   console.log(that.formData.section_street);
      //   console.log('6666666666666')
      //   that.$http.get('/newapi/Premises/index',{
      //     params:{
      //       street_id:that.formData.section_street
      //     }
      //   })
      //     .then(function (res) {
      //       console.log(res)
      //       that.Resi = res.data.res
      //     })
      //     .catch(function (err) {
      //       console.log(err);
      //     })
      // },
      // 获取地段片区下拉
      properchange() {
        let that = this;
        // that.$http.get('/newapi/Area/getAreaStreetlist', {params: {upper_region: that.formData.section_xian}})
        //   .then(function (res) {
        //     let data = res.data;
        //     that.areas = data.res;
        //   })
        //   .catch(function (err) {
        //     console.log(err);
        //   })
      },
      // 获取地段区下拉
      citychange() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: "CN",
            upper_region: that.formData.section_city
          }
        })
          .then(function (res) {
            let data = res.data;
            that.proper = data.res;

          })
          .catch(function (err) {
            console.log(err);
          })
      },
      // 获取城市下拉
      provchange() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: "CN",
            upper_region: that.formData.province
          }
        })
          .then(function (res) {
            let data = res.data
            that.city = data.res
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      // 获取地段城市下拉
      provschange() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: "CN",
            upper_region: that.formData.section_province
          }
        })
          .then(function (res) {
            let data = res.data;
            that.citys = data.res
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      //小区
      broadcast(){
        let that = this;
        that.Resi = []; //清空数据
        axios.post('/newapi/Tourists/add', {
          firstName: 'Fred',
          lastName: 'Flintstone'
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
      },



      // 设置下拉列表
      SetTourList() {
        let that = this;
        that.$http.get('/newapi/Touristslist/index')
          .then(function (res) {
            that.Tourlist = res.data.res
          })
          .catch(function (err) {
            console.log(err);
          })
      },
    },
    mounted: function () {
      this.SetTourList();
      // 设置省下拉列表
      let that = this;
      that.$http.get('/newapi/Area/getAreaRegion', {params: {country_code: "CN"}})
        .then(function (res) {
          that.prov = res.data.res;
          that.provs = res.data.res
        })
        .catch(function (err) {
          console.log(err);
        });

      // 获取个人信息
      // 获取个人信息
      that.$http.get('/newapi/User/index')
        .then(res=>{
          that.myuserinfo = res.data
        }).catch(err=>{
        console.log(err)
      });
    },
  }
</script>
<style scoped>
  .Houses {
    width: 100%;
    float: left;
  }
  .Houses-list {
    width: 94%;
    float: left;
    padding: 0 3%;
  }
  .Houses-li {
    width: 50%;
    float: left;
  }
  .H-p2 {
    width: 50% !important
  }
  .H-p2 input {
    width: 50% !important;
    margin-right: 3px;
  }
  .H-p1 {
    width: 33.333333333%;
    float: left;
  }
  .H-p1 input {
    width: 60%;
    margin-right: 3px;
    padding-left: 2%;
    height: 25px;
    line-height: 25px;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
  }
  .H-p1 span {
    margin-left: 3px;
    display: inline-block;
    text-align: center;
  }
  .Houses-list li {
    width: 50%;
    height: 20px;
    margin-bottom: 10px;
    float: left;
  }
  .tour-btn {
   text-align: center;
  }
  .rema {
    margin-top: 0.5%;
    width: 97.5%;
    padding: 1%;
    float: left;
    border: 1px solid #d3d3d3;
    background: #ffffff;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  .rema textarea {
    width: 100%;
    font-size: .9em;
    height: 60px;
    background: none;
    border: none;
  }
  .custo-list1 li input {
    width: 60%;
  }
  .pub-label {
    font-weight: bold;
    margin-left: 3%;
    margin-bottom: 8px;
  }
  .custo-list1 li span {
    margin-left: 2px;
    display: inline-block;
  }
  .demand {
    width: 56.5%;
    height: 320px;
    overflow: hidden;
    margin-top: 45px;
    float: right;
    background: #ffffff;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  .custo-name {
    width: 30%;
    float: left;
    line-height: 30px;
    text-align: center;
    font-weight:bold;
  }
  .custo-input {
    width: 70%;
    float: left;
  }
  .custo-input input {
    width: 97%;
    padding-left: 2%;
    height: 25px;
    line-height: 15px;
    font-size: .9em;
    border: 1px solid #d3d3d3;
    cursor: pointer;
  }
  .custo-list {
    width: 94%;
    padding: 0 3%;
    float: left;
  }
  #custo-input input {
    height: 0 !important;
  }
  .custo-list li {
    width: 50%;
    height: 20px;
    float: left;
    margin-bottom: 10px;
  }
  .tour {
    width: 58%;
    background: #f9f9f9;
    padding-bottom: 4px;
    position: absolute;
    z-index: 10;
    left: 20%;
    height: 477px;
    overflow: hidden;
    overflow-y: scroll;
    top: 16%;
    border-radius: 5px;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  .custo-title {
    width: 100%;
    float: left;
    text-align: center;
    font-weight: bold;
    line-height: 45px;
  }
  .custo {
    width: 43%;
    float: left;
    margin-top: 45px;
    height: 320px;
    overflow: hidden;
    box-shadow: #e8e7e7 0px 0px 10px;
    background: #ffffff;
  }
  .tour-info {
    width: 100%;
    float: left;
  }
  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }
  img{
    /*position: fixed;*/
    flex-star:40px;
    /*margin-left: 44%;*/
    position: relative;
    border-radius: 10px;
    cursor: pointer;

  }
  img{
    left: 115%;
  }
  .rele-titles {
    width: 48%;
    line-height: 50px;
    font-size: 2em;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;
  }
  .modal{
    position: fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    z-index:1000;
    overflow:hidden !important;

  }
  select{
    cursor: pointer;
  }
  textarea{
    cursor: pointer;
  }
</style>
